.top-layout{
    @include wh(100%);
    margin-bottom: 20rpx;
    .top-item{
      @include flex(center,space-between);
      @include fonts(32rpx,#000000,bold);
        padding: 20rpx 0;
      .top-item-right{
        @include flex(center,flex-end);
        @include fonts(28rpx,#222222);
        text{
            @include fonts(28rpx,#636569);
            margin: 0 8rpx; 
        }
        image{
            @include wh(32rpx,32rpx);
        }
      }
    }
    
    .scroll-x{
        @include wh(100%);

        .scroll-x-layout{
            @include wh(100%);
            @include flex(flex-start,flex-start);
            .card-item{
                @include wh(200rpx);
                padding: 16rpx 16rpx 12rpx 16rpx;
                box-sizing: border-box;
                background: #FFFFFF;
                border-radius: 8rpx;
                margin-right: 24rpx;
                .goodsImg{
                    @include wh(168rpx,168rpx);
                    position: relative;
                    image{
                        @include wh(100%,100%);
                        border-radius: 4rpx;
                    }
                    .label{
                        @include fonts(22rpx,#967E4F,bold);
                        padding: 2rpx 8rpx;
                        box-sizing: border-box;
                        background: #F5F5F5;
    
                        position: absolute;
                        bottom: 0;
                        left: 0;
                    }
                }
    
                .money{
                    @include fonts(24rpx,#222222,bold);
                    margin: 8rpx 0 2rpx 0;
                }
                .bottom{
                    @include flex(center,flex-start);
                    image{
                        @include wh(32rpx,32rpx);
                        margin-right: 8rpx;
                        border-radius: 50%;
                    }
                    .nikeName{
                        @include wh(calc(100% - 40rpx));
                        @include fonts(24rpx,#636569);
                        @extend %text-overflow;
                    }
                }
            }

            .current-card-item{
                @include wh(252rpx);
                background: linear-gradient(180deg, rgba(150,126,79,0.53) 0%, rgba(255,255,255,1) 100%);
                
                .current-goodsImg{
                    @include wh(208rpx,208rpx);
                    .current-label{
                        padding: 4rpx 16rpx;
                        box-sizing: border-box;
                    }
                }

                .current-money{
                    @include fonts(28rpx,#222222,bold);
                }

                .current-bottom{
                    image{
                        @include wh(40rpx,40rpx);
                    }
                    .current-nikeName{
                        @include wh(calc(100% - 48rpx));
                        @include fonts(24rpx,#636569);
                    }
                }
            }
        }
        
    }
}

.card-layout{
    @include wh(100%);
    background: #FFFFFF;
    padding: 24rpx;
    box-sizing: border-box;
    margin-bottom: 8rpx;
    .title{
        @include fonts(28rpx,#000000);
        margin-bottom: 32rpx;
    }
    .swiper {
        @include wh(100%, 480rpx);

        .swiper-img {
            @include wh(100%, 480rpx);
            border-radius: 4rpx;
        }
    }

    .swiper .wx-swiper-dot {
        @include wh(36rpx, 8rpx);
        border-radius: 0rpx;
        background: rgba(255,255,255,0.5);
    }

    .swiper .wx-swiper-dot-active {
        border-radius: 0rpx;
        background: #FFFFFF;
    }


    .price-layout{
        @include flex(flex-end,space-between);
        padding: 50rpx 0 20rpx 0;
        .money{
            @include flex(flex-end,flex-start);
            @include fonts(40rpx,#FE4500,bold);

            text{
                @include fonts(24rpx,#939395);
                text-decoration: line-through;
                margin-left: 12rpx;
            }
        }
        .price-right{
            @include flex(flex-end,flex-end);
            @include fonts(24rpx,#222222);
            .num{
                @include fonts(24rpx,#222222,bold);
                margin-right: 10rpx;
            }
        }
        
    }

    .label-layout{
        @include wh(100%,84rpx);
        @include flex(center,space-between);
        margin-bottom: 24rpx;
        position: relative;
        .label-left{
            @include wh(calc(100% - 56rpx));
            @include flex(center,flex-start);
            overflow: hidden;
            .label{
                @include fonts(28rpx,#FF2D52);
                margin-right: 20rpx;
                padding: 12rpx 20rpx;
                box-sizing: border-box;
                border-radius: 8rpx 8rpx 8rpx 8rpx;
                border: 2rpx solid #FF2D52;
                white-space:nowrap;
            }

        }

        .label-right{
            @include wh(268rpx,84rpx);
            @include flex(center,flex-end);
            @include fonts(28rpx,#FF2D52,bold);
            position: absolute;
            top:0;
            right: 0;
            background: linear-gradient(267deg, #FFFFFF 40%, rgba(255,255,255,0) 100%);
            image{
                @include wh(32rpx,32rpx);
                margin-left: 8rpx;
            }
        }
    }

    .title2{
        @include flex(center,flex-start);
        @include fonts(32rpx,#222222,bold);
        padding: 8rpx 0;
        box-sizing: border-box;
        .label{
            @include fonts(22rpx,#967E4F,bold);
            padding: 2rpx 8rpx;
            box-sizing: border-box;
            margin: 0 12rpx;
            background: #F4F2ED;
        }
        image{
            @include wh(28rpx,28rpx);
        }
    }
    .label-text-layout{
        @include flex(flex-start,flex-start);
        
        .text{
            @include wh(calc(100% - 100rpx));
            @include fonts(26rpx,#222222);
        }
    }
    
    .label-items{
        @include flex(center,center);
        @include fonts(26rpx,#FFF0DA);
        padding: 0 6rpx;
        box-sizing: border-box;
        margin-right: 4rpx;
        background: #967E4F;
        border-radius: 4rpx;
    }

    .title3{
        @include fonts(28rpx,#967E4F,bold);
        margin-bottom: 28rpx;
    }

    .process-layout{
        @include flex(flex-start,flex-start);
        .process-left{
            @include wh(28rpx);
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 7rpx;
            margin-right: 16rpx;

            .drop{
                @include wh(28rpx,28rpx);
            }
            .line{
                @include wh(2rpx,110rpx);
                background: #967E4F;
            }
        }

       .process-right{
            padding-bottom: 28rpx;

            .process-title{
                @include flex(center,flex-start);
                @include fonts(28rpx,#967E4F);
                .label{
                    @include fonts(22rpx,#FFFFFF);
                    padding: 0rpx 8rpx;
                    box-sizing: border-box;
                    background: #222222;
                    border-radius: 10rpx 10rpx 10rpx 0rpx;
                    margin-left: 12rpx;
                }
            }
            text{
                @include fonts(24rpx,#939395);
            }
        }
    }

    .item-card{
        @include wh(100%);
        @include flex(center,space-between);
        @include fonts(24rpx,#939395);
        padding: 12rpx 12rpx 12rpx 24rpx;
        box-sizing: border-box;
        background: linear-gradient(97deg, rgba(150,126,79,0.24) 0%, rgba(150,126,79,0) 100%);
        border-radius: 8rpx;
        text{
            @include wh(90%);
            @extend %text-overflow;
        }
        .right-img{
            @include wh(32rpx,32rpx);
            image{
                @include wh(32rpx,32rpx);
            }
        }
        
    }

    .title4{
        @include flex(center,space-between);
        .title4-left{
            @include flex(center,flex-start);
            @include fonts(30rpx,#222222,bold);
            .portrait{
                @include wh(64rpx,64rpx);
                margin-right: 20rpx;
                border-radius: 50%;
            }
        }
        image{
            @include wh(32rpx,32rpx);
        }
    }
    
    .label-item-layout{
        @include flex(center,flex-start);
        padding: 14rpx 0 48rpx 0;
        box-sizing: border-box;
        .label-item{
            @include flex(center,flex-start);
            @include fonts(28rpx,#939395);

            text{
                @include fonts(28rpx,#222222,bold);
                margin-left: 10rpx;
            }
        }
        .label-item-line{
            @include wh(2rpx,24rpx);
            background: #939395;
            margin: 0 20rpx;
        }
    }

    .title5{
        @include flex(center,space-between);
        @include fonts(28rpx,#222222,bold);

        .right{
            @include flex(center,flex-end);
            @include fonts(24rpx,#939395);
            image{
                @include wh(32rpx,32rpx);
            }

            .but{
                @include fonts(28rpx,#FFFFFF);
                padding: 6rpx 20rpx;
                box-sizing: border-box;
                background: #967E4F;
                border-radius: 4rpx;
            }
        }
    }

    .describe-text{
        @include fonts(28rpx,#636569);
        padding-top: 10rpx;
        box-sizing: border-box;
    }
    .text-overflow-many{
        @include text-overflow-many(4);
        height:180rpx;
    }

    .moer{
        @include wh(100%,50rpx);
        @include flex(center,center);
        padding:16rpx 0 44rpx 0;
        box-sizing: border-box;
        image{
            @include wh(32rpx,32rpx);
        }
    }

    .goodsImgList-layout{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 24rpx;
        .goodsImg-item{
            @include wh(212rpx,212rpx);
            margin-bottom: 10rpx;
        }

        /* 如果最后一行是3个元素 */
        .goodsImg-item:last-child:nth-child(3n - 1) {
            margin-right: calc(32.5% + 3% / 3);
        }
        /* 如果最后一行是2个元素 */
        .goodsImg-item:last-child:nth-child(3n - 2) {
            margin-right: calc(65% + 6% / 3);
        }
    }

    .goods-item{
        @include flex(center,space-between);
        padding: 56rpx 0 32rpx 0;
        box-sizing: border-box;
        .goods-item-img{
            @include wh(72rpx,72rpx);
            @include flex(center,center);
            background: #F5F5F5;
            border-radius: 8rpx;
            image{
                @include wh(56rpx,56rpx);
            }
        }

        .goods-text{
            @include wh(calc(100% - 72rpx - 24rpx));
            @include fonts(30rpx,#222222,bold);
            @extend %text-overflow;
        }
    }

    .buy-item{
        @include flex(center,space-between);
        @include fonts(28rpx,#222222);
        padding: 20rpx 0;
        box-sizing: border-box;
        .item{
            @include wh(20%);
            @include flex(center,flex-start);
            padding-left: 5rpx;
            box-sizing: border-box;
            .portrait{
                @include wh(48rpx,48rpx);
                border-radius: 50%;
                margin-right: 16rpx;
            }
            
        }
        .item:first-child{
            @include wh(30%);
            padding-left: 0rpx;
        }
        .item:last-child{
            @include fonts(28rpx,#939395)
        }
        
    }

    .goods-card-layout{
        @include flex(center,flex-start);

        .goods-card{
            @include wh(150rpx,194rpx);
            padding: 16rpx 16rpx 0 16rpx;
            box-sizing: border-box;
            background: #F9F9F9;
            border-radius: 4rpx;
            margin-right: 20rpx;
            .goods-card-img{
                @include wh(118rpx,118rpx);
                @include flex(center,center);
                background: #FFFFFF;
                image{
                    @include wh(90rpx,90rpx);
                }
            }

            .goods-money{
                @include fonts(24rpx,#222222,bold);
                padding: 12rpx 0;
                box-sizing: border-box;
            }
        }
    }

    .problem-title{
        @include fonts(28rpx,#222222,bold);
        padding: 36rpx 0 20rpx 0;
    }
    .problem-text{
        @include fonts(28rpx,#636569);
    }
}

.card-item-layout{
    @include wh(100%,108rpx);
    @include flex(center,space-between);
    background: #FFFFFF;
    padding: 16rpx 0;
    box-sizing: border-box;
    margin-bottom: 8rpx;
    position: relative;
    .card-item{
        @include wh(33%,108rpx);
        @include fonts(24rpx,#939395);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        border-right: 1rpx solid #E4E4E4;
        .item-val{
            @include wh(180rpx);
            @include fonts(24rpx,#222222);
            @extend %text-overflow;
            margin-bottom: 5rpx;
            text-align: center;
        }

        
    }
    .card-item:last-child{
        border-right: 0rpx solid #FFFFFF;
    }

    .right-item{
        @include wh(108rpx,108rpx);
        @include flex(center,center);
        position: absolute;
        top: 0;
        right: 0;
        background: linear-gradient(270deg, #FFFFFF 60%, rgba(255,255,255,0.2) 100%);
        image{
            @include wh(32rpx,32rpx);
            margin-left: 30rpx;
        }
    }

}

.bottom-layout{
    @include flex(center,space-between);
    padding: 10rpx 24rpx 10rpx 0;
    padding-bottom: 10rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
    box-sizing: border-box;
    background: #FFFFFF;
    position: fixed;
    bottom: 0;
    left: 0;

    .bottom-left{
        @include flex(center,flex-start);

        .bottom-item{
            @include wh(125rpx);
            @include fonts(26rpx,#222222);
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            image{
                @include wh(40rpx,40rpx);
                margin-bottom: 4rpx;
            }

            .button-share{
                @include wh(125rpx,100rpx);
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
            }
        }
    }

    .bottom-but{
        @include wh(346rpx,80rpx);
        @include flex(center,space-between);
        @include fonts(30rpx,#FFFFFF,bold);
        padding: 0 24rpx;
        box-sizing: border-box;
        background: #967E4F;
        border-radius: 8rpx;
        
    }
    .bottom-but-no{
        background-color: #a1a1a1;
    }
    
}

.dialog-content{
    max-height: 60vh;
    padding: 24rpx;
    box-sizing: border-box;
    overflow-y: scroll;
    .coupon-card-layout:last-child{
        margin-bottom: 0rpx;
    }
    .coupon-card-layout{
        padding: 24rpx;
        box-sizing: border-box;
        background: #FDF0F3;
        border-radius: 20rpx;
        margin-bottom: 48rpx;
        .coupon-top{
            @include flex(center,space-between);
            .left{
                @include flex(center,flex-start);
                .money{
                    @include fonts(48rpx,#FF2D52,bold);
                    margin-right: 12rpx;
                }
                .coupon-name{
                    @include wh(350rpx);
                    @include fonts(32rpx,#FF2D52,bold);
                    @extend %text-overflow;
                }
            }

            .but{
                @include wh(136rpx,64rpx);
                @include flex(center,center);
                @include fonts(28rpx,#FFFFFF);
                background: #FF2D52;
                border-radius: 46rpx;
            }

            .disable{
                background: #BFBFBF;
            }
        }

        .label{
            @include fonts(22rpx,#FF2D52,bold);
            display:inline;
            padding: 10rpx 20rpx;
            box-sizing: border-box;
            background: #FFFFFF;
            border-radius: 36rpx;
            margin-top: 12rpx;
        }
        .text{
            @include fonts(24rpx,#222222);
            margin-top: 12rpx;
        }
        .time{
            @include fonts(24rpx,#939395);
            margin-top: 20rpx;
        }
    }

    .item-card{
        @include flex(center,space-between);
        padding: 12rpx 12rpx 12rpx 24rpx;
        box-sizing: border-box;
        background: #F4F2ED;
        border-radius: 8rpx;
        margin-bottom: 16rpx;
        .left{
            @include flex(center,flex-start);
            .fineness{
                @include fonts(40rpx,#967E4F,bold);
            }
            .line{
                @include wh(2rpx,28rpx);
                background: #967E4F;
                margin: 0 24rpx;
            }
            .description{
                @include wh(150rpx);
                @include fonts(28rpx,#222222,bold);
                @extend %text-overflow;
            }
        }
        .right{
            @include wh(330rpx);
            @include fonts(24rpx,#939395);
        }
    }

    .tips-text{
        @include fonts(28rpx,#939395);
        margin-top: 48rpx;
    }
    
    .block-item{
        @include flex(center,flex-start);
        margin-bottom: 40rpx;
        .title{
            @include wh(180rpx);
            @include fonts(28rpx,#636569);
        }
        .content{
            @include wh(calc(100% - 180rpx));
            @include fonts(28rpx,#222222,bold);
        }
    }
    .block-item:last-child{
        margin-bottom: 0rpx;
    }

    .text-item:last-child{
        margin-bottom: 0rpx;
    }
    .text-item{
        margin-bottom: 64rpx;
        .title{
            @include fonts(28rpx,#222222,bold);
            margin-bottom: 12rpx;
        }
        .content{
            @include fonts(24rpx,#939395);
        }
    }
    
    .share-layout{
        @include flex(center,space-between);

        .share-item{
            @include wh(50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            .icon{
                @include wh(84rpx,84rpx);
                @include flex(center,center);
                background: #F5F5F5;
                border-radius: 50%;
                image{
                    @include wh(48rpx,48rpx)
                }
            }
            .share-name{
                @include fonts(28rpx,#222222);
                margin-top: 16rpx;
            }
        }
    }
}